// 0 这不巧了吗
let arr = [
    {x:-64, s:.83, z: 1},
    {x:140, s: 1, z: 2},
    {x:338, s:.83, z: 1},
    {x:960, s:.83, z: 1},
    {x:960, s:.83, z: 1},
    {x:960, s:.83, z: 1},
]


function render()
{
    // 1 获取所有轮播图
    let swiperObjs = document.querySelectorAll('.swiper .swiper-slide')
    // 2 遍历加行内样式
    swiperObjs.forEach((item, i) => { // item就是每隔swiper-slide标签对象
        // item.style.transform = 'translateX(-64px) scale(0.83)'
        item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`
        item.style.zIndex = arr[i].z

        // 方法1：根据索引判断加不一样（不推荐
        // 方法2：自己造一种数据结果
    })
}

render()

// (new Date).getDay()  // 0~6  
// var temp = ['星期天', '星期六', '星期']

function next()
{
    // 1 从数组最后弹出一个值
    var temp = arr.pop() // 多学依照：pop/unshift弹出的后返回弹出的数据
    // 2 将弹出的值压入到数组成 数组第一个值 
    arr.unshift(temp)
    console.log(arr);
    // 3 重新渲染遍历
    render()
}
document.querySelector('.swiper .swiper-next').onclick = next


function prev()
{
    // 1 从数组前面弹出一个值
    var temp = arr.shift()
    // 2 将弹出的值push到数组后面
    arr.push(temp)
    // 3 重新渲染
    render()
}
document.querySelector('.swiper .swiper-prev').onclick = prev


// 点击图片切换
document.querySelector('.swiper .swiper-wrapper').onclick = function(evt) {
    // 获取事件对象
    let e = evt||window.event
    let target = e.target || e.srcElement
    // console.log(target.parentNode.style.transform);

    if (target.parentNode.style.transform.includes('64px'))
    {
        prev()
    }
    if (target.parentNode.style.transform.includes('338px'))
    {
        next()
    }
}